<template>
  <view class="adver-container">
    <view class="adver-item" v-if="adData.type == 1">
      <image :src="adData.imgUrl" mode="" />
    </view>
    <view class="adver-item" v-if="adData.type == 2">
      <video :src="adData.videoUrl" :autoplay="true"></video>
    </view>
    <view class="adver-skip" @click="handleSkip"> 跳过 {{ current }} s </view>
  </view>
</template>

<script>
export default {
  data() {
    const delay = 5;
    let current = delay;
    return {
      adData: {
        type: 1,
        imgUrl:
          "https://tse2-mm.cn.bing.net/th/id/OIP-C.TggCGEFZwh9z_fYfkW3ywAHaGF?w=190&h=180&c=7&o=5&pid=1.7",
        videoUrl: "https://vd3.bdstatic.com/mda-mhf4cv2ig4an1sau/fhd/cae_h264_nowatermark/1629083468197194493/mda-mhf4cv2ig4an1sau.mp4?v_from_s=hkapp-haokan-tucheng&auth_key=1629172011-0-0-ff0ab748111c9c568489129efbc1925c&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=3000187_2",
      },
      current,
      delay,
      timer: null,
    };
  },
  methods: {
    handleDelay() {
      this.timer = setInterval(() => {
        if (this.current == 0) {
          this.handleSkip();
        }
        this.current--;
      }, 1000);
    },
    handleSkip() {
      clearInterval(this.timer);
      this.toLogin();
    },
    toLogin() {
      uni.navigateTo({
        url: "/pages/login",
      });
    },
  },
  onLoad() {
    this.handleDelay();
  },
};
</script>

<style scoped>
html,
body,
uni-page-body {
  width: 100%;
  height: 100%;
}
.adver-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.adver-item {
  width: 100%;
  height: 100%;
}
.adver-item image {
  width: 100%;
  height: 100%;
}
.adver-item video {
  width: 100%;
  height: 100%;
  z-index: 99;
}
.adver-skip {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: #000;
  color: #fff;
  z-index:  100;
}
</style>
